<template>
    <view class="content">
        <view class="top">
			<u-search placeholder="请输入单位、内外勤" :show-action="false" v-model="keyword" @search="doSearch"></u-search>
			<view class="nav">
				<view class="select">
				    <pick-regions @getRegion="handleGetRegion">
				        <view class="adr-box">
				            <view v-if="city">{{ city }}</view>
				            <view v-else class="place">请选择城市</view>
							<view>
								<u-icon name="arrow-down" color="#919191" size="28" class="u-m-l-6"></u-icon>
							</view>
				        </view>
				    </pick-regions>
				</view>
				<view @click="show_2 = true">
					{{ date || '日期' }}<u-icon name="arrow-down" color="#919191" size="28" class="u-m-l-6"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="box" v-for="(item, index) in list" :key="index">
			<view class="item" v-if="item.name">
				<view class="left">单位名称</view>
				<view class="right">{{item.name}}</view>
			</view>
			<view class="item" v-if="item.coupon">
				<view class="left">优惠码</view>
				<view class="right">{{item.coupon}}</view>
			</view>
			<view class="item">
				<view class="left">销售数量</view>
				<view class="right">{{item.order_nums}}</view>
			</view>
			<view class="item">
				<view class="left">答题数量</view>
				<view class="right">{{item.answer_nums}}</view>
			</view>
			<view class="item" v-if="item.inside_name">
				<view class="left">内勤人</view>
				<view class="right">{{item.inside_name}}</view>
			</view>
			<view class="item" v-if="item.outside_name">
				<view class="left">外勤人</view>
				<view class="right">{{item.outside_name}}</view>
			</view>
			<view class="item">
				<view class="left">到期时间</view>
				<view class="right">{{item.end_time}}</view>
			</view>
		</view>
		
		<view style="height: 94rpx;padding-top: 30rpx;">
		    <u-loadmore :status="status" v-if="status != 'loadmore'" />
		</view>
		
		<u-picker v-model="show_2" mode="time" :params="params" @confirm="confirmTime"></u-picker>
    </view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue';
    export default {
		components: {
		    pickRegions
		},
        data() {
            return {
				params: {year: true,month: true,day: false,hour: false,minute: false,second: false},
				show_2: false,
                keyword: '',
				date: '',
				city: '选择城市',
				cityId: '',
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [],
            };
        },
        onLoad() {
            this.getList()
        },
		onReachBottom() {
			if(this.page == 1){return}
			this.getList()
		},
        methods: {
			//选择地区
			handleGetRegion(region) {
			    console.log(region);
				this.city = region[1].name
				this.cityId = region[1].code
			    this.doSearch()
			},
			
			confirmTime(e) {
				console.log(e)
				this.date = e.year + '-' + e.month
				this.doSearch()
			},
			
			doSearch() {
				this.list = []
				this.page = 1
				this.status = 'loadmore'
				this.getList()
			},
			
			getList() {
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.$ajax('staff_share_stats', {
			        userToken: this.$getSync('userToken'),
			        page: this.page,
			        limit: 10,
					keywords: this.keyword,
					pdate: this.date,
					city: this.cityId,
			    }).then(ret => {
					if (ret.status == 0) {
			            if (ret.data.length > 0) {
			            	this.list = this.list.concat(ret.data);
			            	this.page++;
			            	this.status = 'loadmore'
			            } else {
			            	this.status = 'nomore'
			            }
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	
	
    page{
        background-color: #f5f5f5;
    }
	.top{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}
	.nav{
		padding-top: 25rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.select {
		// flex: 1;
	    display: flex;
		justify-content: flex-end;
	    align-items: center;
	    // height: 100upx;
	}
	.adr-box {
	    // width: 76vw;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.adr-box > view {
	    // width: 100%;
	    font-size: 28upx;
		// text-align: right;
	}
	.place {
	    font-size: 28upx;
	    color: #787878;
	    // margin-right: 10upx;
	}
	
	.box{
		padding: 40rpx 32rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 20rpx 20rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 14rpx;
		font-size: 26rpx;
	}
	.item:last-child{
		padding-bottom: 0;
	}
	.left{
		width: 135rpx;
		color: #8e8e8e;
	}
	.right{
		flex: 1;
		color: #000;
		word-break: break-all;
		white-space: pre-line;
	}
	

</style>
